<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    学习jquery的网站: https://zixuephp.net/manual-jquery-1137.html
    -->
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        1. jquery个版本之间的差异:
            - 1.x: 兼容ie678, 但相对于其他版本文件较大, 官方制作bug维护, 不再更新;
            - 2.x: 不兼容ie678, 相对1.x文件较小, 官方只做bug维护, 功能不再更新.
            - 3.x: 不兼容ie678, 只支持最新的浏览器, 很多老的jquery插件不支持这个版本, 相对1.x文件较小, 提供不包含ajax/动画api的版本.
        2. jquery分为开发版和生产min版的原因:
            - js资源虽然放置在服务器端, 但是这个资源是会被用户的浏览器访问的, 并且访问的很频繁(代开网页就访问), 所以就需要控制jquery文
            件的大小, 从未节省网络带宽.
            - 其实开发版和生产min版的区别就是:
                1. 使多余的注释和换行全部去除;
                    - 这样不利于开发, 但是利于生产环境的快速响应
                2. 使变量的名称尽量简短;
                    - 这样不利于开发, 但是利于生产环境的快速响应
    -->
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
</body>
<script>

    //js的页面加载事件
    window.onload = function () {


    };

    //jquery的页面加载事件的简单写法
    $(function () {
        controlCss();
    });

    //这是jquery的页面加载事件的完整写法
    $(document).ready(function () {
        console.log("事件触发");
    });

    /**
     * 功能:
     *      使用jquery方式获取元素的html代码并通过浏览器打印.
     * 输出:
     *      通过浏览器观察.
     * 注意:
     *      1. $("#box2")[0]这样可以使控制台打印出元素的代码.
     *          - 如果使用这种方式之后, 获取到的元素就不再是这个元素的对象, 而是这个对象中的一个属性.
     */
    function printHtmlCode() {
        const div1 = $("div")[0];
        const div2 = $(".box1")[0];
        const div3 = $("#box2")[0];

        console.log(div1);
        console.log(div2);
        console.log(div3);

        //下面的代码会报错, 是因为$("#box2")[0]这样获取的不是元素的对象了, 而是元素中的某个字段值.
        div1.css({
            backgroundColor: "blue"
        });
        div2.css({
            backgroundColor: "yellow"
        });
        div3.css({
            backgroundColor: "red"
        });
    }

    /**
     * 功能:
     *      使用原生js方式获取dom元素.
     * 输出:
     *      使用浏览器的f12功能, 在console页面可以观察console.log)函数的输出.
     */
    function printHtmlCodeUseJs() {
        const div1 = document.getElementsByTagName("div")[0];
        const div2 = document.getElementsByClassName("box1")[0];
        const div3 = document.getElementById("box2");

        console.log(div1);
        console.log(div2);
        console.log(div3);
    }

    /**
     * 功能:
     *      使用原生js控制dom元素的css属性.
     * 输出:
     *      通过浏览器观察div的背景色.
     */
    function controlCssUseJs() {
        const div1 = document.getElementsByTagName("div")[0];
        const div2 = document.getElementsByClassName("box1")[0];
        const div3 = document.getElementById("box2");

        //以原生js方式设置元素的style属性
        div1.style.backgroundColor = "red";
        div2.style.backgroundColor = "blue";
        div3.style.backgroundColor = "yellow";
    }

    /**
     * 功能:
     *      通过jquery来控制元素的属性.
     */
    function controlCss() {
        const div1 = $("div");
        const div2 = $(".box1");
        const div3 = $("#box2");

        div1.css({
            backgroundColor: "blue",
            width: "200px"
        });
        div2.css({
            backgroundColor: "yellow"
        });
        div3.css({
            backgroundColor: "red"
        });

        console.log(div1);
        console.log(div2);
        console.log(div3);
    }

    /**
     * 功能:
     *      查看获取到的对象的信息.
     * 输出:
     *      jQuery.fn.init(5) [div, div.box1, div#box2, div#xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}.xl-chrome-ext-bar, div.xl-chrome-ext-bar__logo, prevObject: jQuery.fn.init(1)]
     *      simple.html?_ijt=6aio4et30fisj3c545569b0o05:122 jQuery.fn.init [div.box1, prevObject: jQuery.fn.init(1)]
     *      simple.html?_ijt=6aio4et30fisj3c545569b0o05:123 jQuery.fn.init [div#box2]
     * 说明:
     *      1. 这些对象中包含着获取到的节点的各种信息.
     */
    function printHtmlObject() {
        const div1 = $("div");
        const div2 = $(".box1");
        const div3 = $("#box2");

        console.log(div1);
        console.log(div2);
        console.log(div3);
    }
</script>
</html>